<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
  html, body {
    background-color: #FAFAFA;
    /*min-height: 100%;*/
    height: unset !important;
    margin: 0;
  }
  @font-face {
      font-family: 'DIN-Bold';
      src: url('./assets/fonts/DIN-Bold.ttf');
  }
  @font-face {
      font-family: 'DIN-Medium';
      src: url('./assets/fonts/DIN-Medium.ttf');
  }
  .DIN-Bold {font-family: DIN-Bold,serif;}
  .DIN-Medium {font-family: DIN-Medium,serif;}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 0.32rem;
  width: 7.5rem;
  margin: 0 auto;
  background-color: #FAFAFA;
}
  /* 重置 下拉刷新位置 */
  .yd-pullrefresh-dragtip {
    /*top: -0.88rem !important;*/
  }
/*  点按阴影 */
  .active-white {
    position: relative;
    overflow: hidden;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
    &:active {
      &:after {
        background-color: rgba(255, 255, 255, .2);
      }
    }
  }
  .active-black {
    position: relative;
    overflow: hidden;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
    &:active {
      &:after {
        background-color: rgba(0, 0, 0, .2);
      }
    }
  }
/* 弹性布局 */
  .f-row {
    display: flex;
    flex-direction: row;
  }
  .f-column {
    display: flex;
    flex-direction: column;
  }
  .f-j-start {
    justify-content: flex-start;
  }
  .f-j-center {
    justify-content: center;
  }
  .f-j-end {
    justify-content: flex-end;
  }
  .f-j-around {
    justify-content: space-around;
  }
  .f-j-between {
    justify-content: space-between;
  }
  .f-a-start {
    align-items: flex-start;
  }
  .f-a-center {
    align-items: center;
  }
  .f-a-end {
    align-items: flex-end;
  }
  .f-1 {flex: 1;}
  .f-2 {flex: 2;}
  .f-3 {flex: 3;}
  .f-4 {flex: 4;}
/* 去掉输入框默认样式 */
  input {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.2rem;
    outline: none;
    border: none;
    border-bottom: 0.02rem solid #D8D8D8;
    color: #0073F8;
    transition: all 0.5s;
    display: inline-block;
    width: auto;
    &:focus {
      border-bottom: 0.02rem solid #3B83FF;
    }
    &::-webkit-input-placeholder {
      color: #CCCCCC;
    }
  }
/*  统一提交按钮*/
  .submitButton {
    width: 6.3rem;
    height: 1.0rem;
    text-align: center;
    line-height: 1.0rem;
    background:linear-gradient(136deg,rgba(252,223,6,1) 0%,rgba(254,206,21,1) 100%);
    border-radius: 0.1rem;
    color: black;
    position: relative;
    overflow: hidden;
    user-select: none;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
    &:active {
      &:after {
        background-color: rgba(255, 255, 255, .2);
      }
    }
  }
  .unSubmit {
    width: 6.3rem;
    height: 1.0rem;
    text-align: center;
    line-height: 1.0rem;
    background:#DEDEDE;
    border-radius: 0.1rem;
    color: white;
    position: relative;
    overflow: hidden;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
    &:active {
      &:after {
        /*background-color: rgba(255, 255, 255, .2);*/
      }
    }
  }
</style>
